<template>
  <div class="login">
    <div>
      {{ num }}
    </div>
    <div>
      {{ this.$store.state.count }}
    </div>
    <input type="button" value="addddd" @click="add()" />
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      num: 0
    }
  },
  methods: {
    add() {
      this.$store.commit('add', 20)
    }
  },
  mounted() {
    this.num = this.$store.state.count
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
  height: 1000px;
}
</style>
